<template>
  <div class="news_details">
    <div class="bg_title">
      {{ details.title }}
    </div>
    <div class="time_source">
      时间:{{ details.updateTime }} 来源:{{ details.subhead }}
    </div>
    <div class="v-html" v-html="details.content"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import { useRoute } from "vue-router";
import { selectNewsFIRST } from "@/utils/apis/home";

export default defineComponent({
  name: "NewsDetails",
  components: {},
  props: {},
  setup() {
    const state = reactive({
      details: {},
    });
    const route = useRoute();
    const { newsId } = route.query;

    onMounted(async () => {
      const res = await selectNewsFIRST({ newsId: newsId });
      state.details = res.data;
    });

    return { ...toRefs(state) };
  },
});
</script>
<style lang="scss" scoped>
.news_details {
  // background-color: #fff;
  padding: 20px;
  padding-bottom: 45px;
  .bg_title {
    font-weight: 600;
    font-size: 20px;
    color: #333;
    margin-bottom: 20px;
  }
  .time_source {
    font-size: 16px;
    color: #666666;
    border-bottom: 1px solid #ededed;
    padding-bottom: 10px;
    margin-bottom: 20px;
  }
}
</style>
